<template>
    <Layout v-slot="props">
        <div class="detail">
            <span>请假状态</span>
            <span v-if="props.leaveData.state == 16">班主任已通过</span>
            <span v-else-if="props.leaveData.state == 22">系部主任已通过</span>
            <span v-else-if="props.leaveData.state == 3">家长已拒绝</span>
            <span v-else>未通过</span>
        </div>
        <div class="detail">
            <span>姓名</span>
            <span>{{ props.leaveData.studentName }}</span>
        </div>
        <div class="detail">
            <span>学号</span>
            <span>{{ props.leaveData.studentNumber }}</span>
        </div>
        <div class="detail">
            <span>班级</span>
            <span>{{ props.leaveData.className }}</span>
        </div>
        <div class="detail">
            <span>班主任</span>
            <span>{{ props.leaveData.headTeacherName }}</span>
        </div>
        <div class="detail">
            <span>家长电话</span>
            <span>{{ props.leaveData.parentPhone }}</span>
        </div>
        <div class="detail">
            <span>请假类型</span>
            <span v-if="props.leaveData.leaveType == 1">事假（因公请假）</span>
            <span v-else-if="props.leaveData.leaveType == 2">病假</span>
            <span v-else-if="props.leaveData.leaveType == 3">补假</span>
            <span v-else-if="props.leaveData.leaveType == 4">销假</span>
            <span v-else>事假（因私请假）</span>
        </div>
        <div v-if="props.leaveData.imageUrls" class="uploadImg">
            <span>上传图片证明</span>
            <el-image
                style="width: 46rem; height: 46rem; margin-right: 5rem"
                v-for="url in props.leaveData.imageUrls"
                :src="url"
                :previewSrcList="props.leaveData.imageUrls"
            >
            </el-image>
        </div>
        <div class="detail">
            <span>请假开始时间</span>
            <span>{{ props.leaveData.startTime }}</span>
        </div>
        <div class="detail">
            <span>请假结束时间</span>
            <span>{{ props.leaveData.endTime }}</span>
        </div>
        <div class="detail">
            <span>是否离深</span>
            <span v-if="props.leaveData.leaveSz == 1">是</span>
            <span v-else>否</span>
        </div>
        <div v-if="props.leaveData.leaveSz == 1" class="detail">
            <span>去往目的地</span>
            <span>{{ props.leaveData.leavePlace }}</span>
        </div>
        <div class="detail">
            <span>请假理由</span>
            <span v-if="props.leaveData.reason">{{
                props.leaveData.reason
            }}</span>
            <span v-else>无</span>
        </div>
        <div class="detail">
            <span>审批人</span>
            <span v-if="props.vetting.headTeacher.detail">{{
                props.vetting.headTeacher.detail
            }}</span>
            <span v-else>暂无审核人通过</span>
        </div>
        <div
            class="detail"
            :class="{ noshow: props.vetting.sapprover.detail == '' }"
        >
            <span>第二审批人</span>
            <span v-if="props.vetting.sapprover.detail !== ''">{{
                props.vetting.sapprover.detail
            }}</span>
        </div>
        <div
            class="detail"
            :class="{ noshow: props.vetting.eapprover.detail == '' }"
        >
            <span>最终审批人</span>
            <span v-if="props.vetting.eapprover.detail !== ''">{{
                props.vetting.eapprover.detail
            }}</span>
        </div>
        <div
            class="detail"
            :class="{ noshow: props.vetting.parent.detail == '' }"
        >
            <span>家长意见</span>
            <span v-if="props.vetting.parent.detail !== ''">{{
                props.vetting.parent.detail
            }}</span>
        </div>
    </Layout>
</template>

<script setup>
import Layout from './component/Layout.vue';
</script>

<style lang="scss" scoped>
@import url('./style/records.scss');

.uploadImg {
    display: flex;
    width: 90vw;
    height: 50rem;
    font-size: 14rem;
}

.uploadImg span {
    width: 30%;
    height: 60%;
    display: flex;
    justify-content: end;
    align-items: center;
    margin-right: 10rem;
}

.uploadImg img {
    width: 46rem;
    height: 46rem;
    display: flex;
    justify-content: start;
    align-items: center;
    border: none;
}
</style>
